<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true">
      <el-form-item label="学生状态">
        <el-select size="mini" v-model="query.status" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生名称">
        <el-input
          size="mini"
          v-model.lazy="query.nickname"
          placeholder="请输入学生关键字"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          size="mini"
          v-model.lazy="query.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
    </el-form>

    <div>
      <el-button
        @click="$router.push({ name: 'UserStudentEdit' })"
        size="mini"
        type="primary"
        >添加学员</el-button
      >
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" border :data="students.list">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="学生姓名" prop="nickname"> </el-table-column>
      <el-table-column label="手机号" prop="mobile"> </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="created_at">
        <template slot-scope="scope">
          {{ scope.row.created_at | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link
            size="mini"
            @click="
              $router.push({
                name: 'UserStudentEdit',
                query: { id: scope.row.uid }
              })
            "
            >编辑</el-link
          >-
          <el-link @click="$router.push({name:'UserStudentDetail', query:{id:scope.row.uid}})" size="mini">详情</el-link>-
          <el-link size="mini">编辑</el-link>-
          <el-link size="mini">编辑</el-link>-
          <el-link size="mini">编辑</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 翻页 -->
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageClicked"
      :current-page="query.page"
      :page-sizes="[20, 30, 40, 50]"
      :page-size="query.limit"
      layout="total, prev, pager, next, jumper, sizes"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getStudents } from '../../api'
export default {
  name: 'Student',
  data() {
    return {
      students: [],
      total: 0,
      loading: false, // 是否正在加载中
      query: {
        page: 1,
        limit: 20,
        status: '',
        nickname: '',
        mobile: ''
      }
    }
  },
  watch: {
    // query: function() {

    // }
    query: {
      deep: true,
      handler: function() {
        // 当条件改变时重新调用接口
        this.getStudents()
      }
    }
  },
  methods: {
    // 根据条件调用接口
    getStudents() {
      // 加载中...
      this.loading = true
      // 只要 query 改变就重新调用接口
      // 根据条件 重新调用接口获取数据
      getStudents(this.query)
        .then(res => {
          // 更新总的记录数
          this.total = res.data.total
          this.students = res.data
        })
        .finally(() => {
          // 无论成功与否都要关闭 loaindg
          this.loading = false
        })
    },
    // 当点击了按钮时
    pageClicked(page) {
      // 更新翻页变量
      this.query.page = page
    },
    // 当选择了每页条数时
    pageSizeChange(size) {
      // 更新本地每页条数
      this.query.limit = size
    }
  },
  created() {
    // 当页面加载时获取数据
    this.getStudents()
  }
}
</script>
